<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>欣欣视频首页</title>
		<link rel="stylesheet" href="css/main.css" />
		<style>

			/* 全局样式重置与基础设置 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			}

			body {
				background-color: #f5f7fa;
				color: #333;
				line-height: 1.6;
			}

			a {
				text-decoration: none;
				color: inherit;
			}

			/* 导航栏样式优化 */
			.head_bg {
				background-color: #fff;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
				padding: 15px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.logo {
				display: flex;
				align-items: center;
				font-size: 24px;
				font-weight: bold;
				color: #0078ff;
			}

			.logo::before {
				margin-right: 10px;
				font-size: 28px;
			}

			.head_bg>div:last-child {
				display: flex;
				gap: 20px;
			}

			.head_bg a {
				color: #666;
				font-size: 14px;
				padding: 5px 0;
				position: relative;
			}

			.head_bg a:hover {
				color: #0078ff;
			}

			.head_bg a::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0;
				height: 2px;
				background-color: #0078ff;
				transition: width 0.3s ease;
			}

			.head_bg a:hover::after {
				width: 100%;
			}

			/* 新增视频列表样式 */
			.video-list {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				justify-content: center;
			}

			.video-item {
				flex: 0 0 calc(25% - 20px);
				/* 每行 4 个视频，减去间距 */
				margin-bottom: 20px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
				border-radius: 8px;
				overflow: hidden;
				background-color: #fff;
				transition: all 0.3s ease;
				cursor: pointer;
			}

			.video-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
			}

			.video-thumbnail {
				width: 100%;
				height: 150px;
				background-color: #eee;
				background-size: cover;
				background-position: center;
				position: relative;
				overflow: hidden;
			}

			.video-thumbnail::after {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: white;
				font-size: 24px;
				background-color: rgba(0, 0, 0, 0.5);
				width: 48px;
				height: 48px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			.video-item:hover .video-thumbnail::after {
				opacity: 1;
			}

			.video-thumbnail::before {
				content: "03:45";
				position: absolute;
				bottom: 8px;
				right: 8px;
				background-color: rgba(0, 0, 0, 0.7);
				color: white;
				font-size: 12px;
				padding: 2px 6px;
				border-radius: 4px;
			}

			.video-title {
				padding: 12px;
				font-size: 14px;
				color: #333;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				height: 42px;
			}

			.search_form {
				text-align: center;
				margin: 30px 0;
				padding: 0 20px;
			}

			.search_form form {
				display: inline-flex;
				border-radius: 30px;
				overflow: hidden;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
				max-width: 600px;
				width: 100%;
			}

			.search_form input[type="search"] {
				flex: 1;
				padding: 14px 20px;
				border: none;
				font-size: 16px;
				outline: none;
				background-color: #fff;
			}

			.search_form input[type="search"]:focus {
			    outline: 2px solid #8ec5fc;
			    outline-offset: 0;
			    border: none;
			}

			.search_form button.search {
				padding: 14px 24px;
				background-color: #0078ff;
				border: none;
				color: white;
				font-size: 16px;
				cursor: pointer;
				transition: background-color 0.3s;
				display: flex;
				align-items: center;
				justify-content: center;
			}


			.search_form button.search:hover {
				background-color: #0056b3;
			}

			/* 新增视频分类样式 */
			.video-categories {
				display: flex;
				gap: 12px;
				margin-bottom: 30px;
				flex-wrap: wrap;
				justify-content: center;
				padding: 0 20px;
			}

			.category-btn {
				padding: 8px 18px;
				border: 1px solid #0078ff;
				border-radius: 20px;
				background-color: white;
				color: #0078ff;
				cursor: pointer;
				transition: all 0.3s;
				font-size: 14px;
			}

			.category-btn:hover,
			.category-btn.active {
				background-color: #0078ff;
				color: white;
				transform: translateY(-2px);
				box-shadow: 0 4px 8px rgba(0, 120, 255, 0.2);
			}

			/* 中间内容区域样式 */
			.middle {
				max-width: 1200px;
				margin: 0 auto;
				padding: 20px;
			}

			/* 加载更多按钮 */
			.load-more {
				text-align: center;
				margin: 40px 0;
			}

			.load-more button {
				padding: 10px 24px;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 20px;
				color: #666;
				cursor: pointer;
				transition: all 0.3s;
				font-size: 14px;
				display: flex;
				align-items: center;
				gap: 8px;
				margin: 0 auto;
			}

			.load-more button:hover {
				border-color: #0078ff;
				color: #0078ff;
			}

			/* 页脚样式优化 */
			.bottom {
				background-color: #f8f9fa;
				padding: 30px 0;
				margin-top: 40px;
				border-top: 1px solid #eee;
			}

			.bottom>div {
				text-align: center;
				color: #666;
				font-size: 14px;
			}

			/* 返回顶部按钮 */
			.back-to-top {
				position: fixed;
				bottom: 30px;
				right: 30px;
				width: 40px;
				height: 40px;
				background-color: #0078ff;
				color: white;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
			}


			.back-to-top.show {
				opacity: 1;
				visibility: visible;
			}
		</style>
		<script src="js/jquery/jquery.min.js"></script>
		<script src="js/http-client.js"></script>
		<script src="js/api-config.js"></script>
		<script src="js/search.js"></script>
	</head>
	<body>
		<div>
			<div class="head_bg">
				<div class="logo">欣欣视频</div>
				<div>
					<span><a href="#">登录</a></span>
					<span><a href="#">注册</a></span>
					<span><a href="#">APP下载</a></span>
					<span><a href="#">PC客户端</a></span>
				</div>
			</div>
			<div style="margin-top: 10px;">
				<div class="search_form">
					<form action="#" method="post">
						<input type="search" id="keyword" name="keyword" placeholder="娱乐/新闻/体育/电影..." />
						<button type="button" class="search"></button>
					</form>
				</div>
			</div>
			<div class="middle">
				<!-- 新增视频分类 -->
				<div class="video-categories" style="text-align: center;color: orange;">
					<button data-category-id="0" class="category-btn active">全部</button>
				</div>
				<div class="video-list">
				</div>

			</div>
			<div class="bottom">
				<div><span>Copyright</span><span>&copy;</span><span>2001-2025</span><span>欣欣视频网</span> | <span>ICP备案号:
						京ICP备12345678号-1</span></div>
			</div>

			<!-- 返回顶部按钮 -->
			<div class="back-to-top" id="backToTop"></div>
		</div>

		<script>
			// 返回顶部功能
			const backToTopButton = document.getElementById('backToTop');

			window.addEventListener('scroll', () => {
				if (window.pageYOffset > 300) {
					backToTopButton.classList.add('show');
				} else {
					backToTopButton.classList.remove('show');
				}
			});

			backToTopButton.addEventListener('click', () => {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			});
		</script>
	</body>
</html>